<template>
  <div class="zw-exchange">
    <div class="zw-exchange-content">
      <div v-if="list.length !=0">
        <div class="zw-item" v-for="item in list">
          <div class="zw-item--circle">
            <i></i>
          </div>
          <div class="zw-item--step">
            <div class="line"></div>
            <div class="zw-card">
              <div class="zw-card--title">
                <p>{{new Date(item.createTime).getFullYear()}}年</p>
                <p><span class="large">{{new Date(item.createTime).getDate()}}/</span>{{new Date(item.createTime).getMonth()+1}}</p>
              </div>
              <div class="zw-card--con">
                <ul>
                  <li class="title">账户名：{{item.accountName}}</li>
                  <li class="des">{{['','已申请','','','','已审核','','','','','已完成'][item.status] || '状态不明'}}</li>
                  <!-- "status": 1, // 1:已申请, 5:已审核, 10:已完成 -->
                </ul>
                <ul>
                  <li class="value">转账金额：<span style="color:#FD7D6A;" class="large"> ¥{{item.amount&&item.amount.toFixed(0)}}<small>.00</small></span></li>
                  <li class="value">开户行：{{item.accountBank}}</li>
                  <li class="value">银行卡账号：{{item.accountNumber}}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <p class="no-record">暂无记录</p>
      </div>
    </div>
    <div class="zw-footer" @click="record()"><span style="font-size:32px;"></span>申请结算</div>
  </div>
</template>
<script>
import { Toast, Indicator } from 'mint-ui';
import { mapActions, mapGetters } from 'vuex';
import sharePop from "components/sharePop"
import { getRedeemReward } from "api/moneyBack"
import { wxshare } from 'common/mixin'
import addChannel from '../channel/addChannel';

export default {
  mixins: [wxshare],
  components: { addChannel },
  data() {
    return {
      list: []
    }
  },
  watch: {
    '$route' (to, from) {
      this.getList();
    }
  },
  methods: {
    ...mapActions({
      getListChannelRedeem: 'getListChannelRedeem',
    }),

    getList() {
      Indicator.open();
      this.getListChannelRedeem({}).then(result => {
        this.list = result.data.beanList;
        // this.list = [{
        //   "log": null,
        //   "id": 6,
        //   "logId": 0,
        //   "type": 1,
        //   "status": 1, // 1:已申请, 2:已审核, 3:已完成
        //   "amount": 0,
        //   "operatorId": 0,
        //   "operatorName": null,
        //   "channelId": 2354282,
        //   "channelName": null,
        //   "point": 0,
        //   "accountName": null,
        //   "accountNumber": null,
        //   "accountBank": null,
        //   "createTime": 1519532118000,
        //   "updateTime": 1519538129000,
        //   "comment": null
        // }, {
        //   "log": null,
        //   "id": 6,
        //   "logId": 0,
        //   "type": 1,
        //   "status": 1, // 1:已申请, 2:已审核, 3:已完成
        //   "amount": 0,
        //   "operatorId": 0,
        //   "operatorName": null,
        //   "channelId": 2354282,
        //   "channelName": null,
        //   "point": 0,
        //   "accountName": null,
        //   "accountNumber": null,
        //   "accountBank": null,
        //   "createTime": 1519532118000,
        //   "updateTime": 1519538129000,
        //   "comment": null
        // }];
        Indicator.close();
      }, error => {
        Indicator.close();
      })
    }
  },
  mounted() {
    this.getList();
  },
}

</script>
<style scoped lang="less">
@import './me.css';

.zw-exchange {
  .no-record {
    text-align: center;
    padding-top: 5rem;
    font-size: 1rem;
    color: #ccc;
  }

  .zw-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-image: -webkit-gradient(linear, right top, left top, from(#75B0F1), to(#75D0F1));
    background-image: linear-gradient(-90deg, #75B0F1 0, #75D0F1 100%);
    -webkit-box-shadow: 0 -2px 8px 0 rgba(118, 177, 242, .6);
    box-shadow: 0 -2px 8px 0 rgba(118, 177, 242, .6);
    line-height: 40px;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #FDFBF4
  }
}




/*@import './channelList.less';*/

</style>
